<template>
  <el-row
    class="page-header"
    type="flex"
    justify="space-between"
  >
    <el-col
      :span="8"
      class="navigation"
    >
      <AreaSelect />
    </el-col>
    <el-col
      :span="8"
      class="title"
    >
      <router-link
        v-for="r in routes[0].children"
        :key="r.name"
        :to="{ name: r.name }"
      >
        {{ r.meta.title }}
      </router-link>
    </el-col>
    <!-- <el-col :span="6">
        <div style="width: 355px; background: rgb(236, 245, 255)">
          <div style="float: left; width: 11%; height: 40px; background: rgb(83, 168, 255)" />
          <div style="float: left; width: 11%; height: 40px; background: rgb(102, 177, 255)" />
          <div style="float: left; width: 11%; height: 40px; background: rgb(121, 187, 255)" />
          <div style="float: left; width: 11%; height: 40px; background: rgb(140, 197, 255)" />
          <div style="float: left; width: 11%; height: 40px; background: rgb(160, 207, 255)" />
          <div style="float: left; width: 11%; height: 40px; background: rgb(179, 216, 255)" />
          <div style="float: left; width: 11%; height: 40px; background: rgb(198, 226, 255)" />
          <div style="float: left; width: 11%; height: 40px; background: rgb(217, 236, 255)" />
        </div>
      </el-col> -->
    <el-col :span="8">
      <div class="header-r">
        <span><img
          width="18"
          height="18"
          src="../../assets/imgs/sjc.png"
          alt=""
        > 数据仓</span>
        <span><img
          width="18"
          height="18"
          src="../../assets/imgs/htgl.png"
          alt=""
        > 后台管理</span>
        <span><img
          width="18"
          height="18"
          src="../../assets/imgs/exit.png"
          alt=""
          @click="logout"
        ></span>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import AreaSelect from '@/components/select/AreaSelect.vue';
import { routes } from '@/router/index';
export default {
  components: {
    AreaSelect
  },
  data () {
    return {
      show: false,
      value: [],
      routes
    };
  },
  methods: {
    handleChange (value) {
      console.log(value);
    },
    logout () {}
  }
};
</script>

<style scoped lang="less">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.page-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;

  height: 104px;
  color: #fff;
  background-image: url("~@/assets/imgs/headerBg.webp");
  background-size: 100% 100%;
  .title {
    text-align: center;
    font-family: "ysbth";
    font-size: 32px;
    line-height: 32px;
    // position: relative;
    a {
      color: #fff;
    }
    span {
      display: inline-block;
    }
    .nav-select {
      width: 128px;
      // height: 127px;
      position: relative;
      // top: 85px;
      left: 50%;
      display: flex;
      flex-direction: column;
      transform: translateX(-50%);
      z-index: 9999;
      a {
        height: 36px;
        background: #3c98ff;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #fff;
        line-height: 36px;
        &:hover {
          background-color: #0061ce;
        }
      }
    }
  }
  .header-r {
    float: right;
    width: 300px;
    display: flex;
    height: 55px;
    align-items: center;
    justify-content: space-around;
    span {
      display: flex;
      cursor: pointer;
      img {
        margin-right: 10px;
      }
    }
  }
}
</style>
